<template>
	<div id="StorageCell">
		<h1>安全库存配置单查询</h1>
			  <el-form :inline="true" class="demo-form-inline" v-model="queryCell">
			    <el-form-item label="请选择I级分类：">
			      <el-select placeholder="--请选择--"  v-model="queryCell.search_firstKindId">
			        <!-- <el-option :label="请选择" :value="null">--请选择--</el-option> -->
			          <el-option label="电子" value="01"></el-option>
			      </el-select>
			    </el-form-item>
			    <el-form-item label="请选择II级分类：">
			      <el-select placeholder="--请选择--" v-model="queryCell.search_secondKindId">
			        <!-- <el-option :label="请选择" :value="null">--请选择--</el-option> -->
			         <el-option label="计算机" value="02"></el-option>
			      </el-select>
			    </el-form-item>
			    <el-form-item label="请选择III级分类：">
			      <el-select placeholder="--请选择--" v-model="queryCell.search_thirdKindId">
			        <!-- <el-option :label="请选择" :value="null">--请选择--</el-option> -->
			         <el-option label="服务器" value="03"></el-option>
			      </el-select>
			    </el-form-item>
				<el-form-item label="请输入建档时间：">
				  <el-input placeholder="请输入建档时间：" v-model="queryCell.search_registerTime1"></el-input>
				   <el-input placeholder="请输入建档时间：" v-model="queryCell.search_registerTime2"></el-input>
				</el-form-item>
			   <el-form-item>
			      <el-button type="primary" icon="el-icon-search" round @click="selBtn">查询</el-button>
				 <!-- <el-button type="warning" icon="el-icon-plus" @click="showAddDialog">添加</el-button> -->
			    </el-form-item>
			  </el-form>
		<el-table
		  :data="cellAry"
		  style="width: 100%">
		  <el-table-column
		    prop="storeId"
		    label="配置单编号"
		    width="200">
		  </el-table-column>
		  <el-table-column
		    prop="productId"
		    label="产品编号"
		    width="200">
		  </el-table-column>
		  <el-table-column
		    prop="productName"
		    label="产品名称"
		    width="200">
		  </el-table-column>
			<el-table-column
			  prop="checkTag"
			  label="复核状态"
			  width="200">
			  <template slot-scope="scope">
				  <span v-if="scope.row.checkTag=='S001-0'">等待审核</span>
				  <span v-else-if="scope.row.checkTag=='S001-1'">审核通过</span>
				  <span v-else>审核不通过</span>
			  </template>
			</el-table-column>
		  <!--操作列-->
		  <el-table-column label="操作">
		  <template slot-scope="scope">
		    <el-button
		      size="mini"
		      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		  </template>
		</el-table-column>
		</el-table>
		<!---分页组件-->
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="currentPage"
		  :page-sizes="pageSizeList"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total">
		</el-pagination>
	</div>
</template>

<script>
	import axios from 'axios';
	export default{
		name:'StorageCell',
		data() {
			return {
				//查询条件
				queryCell:{
					search_firstKindId:"",
					search_secondKindId:"",
					search_thirdKindId:"",
					search_registerTime1:"",
					search_registerTime2:"",
				},
				//库存查询数据
				cellAry:[],
				// 当前页号
				currentPage: 1,
				// 当前页大小
				pageSize: 5,
				// 总记录数
				total: 13,
				// 页大小列表
				pageSizeList: [2, 5, 10, 20],
			}
		},
		methods:{
			  // 分页查询安全库存信息
			async StroageCellPage() {
			  // 用es6的解构函数
			  const {data: res} = await this.$http.post
			  (`/design/storage/list/${this.currentPage}/${this.pageSize}`, this.queryCell)
			console.log(res);
			  this.cellAry = res.rows
			  this.total = res.total
			},
			handleEdit(index, row) {
				console.log(index,row);
			  },
			  // 页大小改变
			  handleSizeChange(val) {
			      this.pageSize = val
			      this.StroageCellPage()
			  },
			  // 页号改变
			  handleCurrentChange(val) {
			    this.currentPage = val
			    // 重新查询
			    this.StroageCellPage()
			  },
			  selBtn(){
			    this.StroageCellPage(),
			      this.currentPage = 1
			  },
			},
		created() {
			this.StroageCellPage()
		}
	}
</script>

<style>
</style>